const {resolve} = require('path');
// clean-webpack-plugin
// const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// html-webpack-plugin
// mini-css-extract-plugin
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
	mode: 'production',
	entry: './index.js',
	output: {
		path: resolve(__dirname, 'dist'),
		filename: 'js/index.js',
		clean: true
	},
	resolveLoader: {
		modules: ['node_modules', resolve(__dirname, "./loaders")]
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				use: 'file-loader'
			},
			{
				test: /\.css$/,
				use: [
					// 'style-loader',
					{
						loader: MiniCssExtractPlugin.loader
					},
					'css-loader'
				]
			},
			{
				test: /\.md$/,
				use: 'doc-loader'
			}
		]
	},
	// 注册插件
	plugins: [
		// 当我们的插件注册之后，webpack会自动调用apply 把插件放入对应的生命周期
		// new CleanWebpackPlugin()
		new HTMLWebpackPlugin({
			// 路径相对于入口文件
			template: './public/index.html',
			filename: 'public/app.html',
			title: 'webpack-plugin'
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css'
		})
	]
}
